<template>
    <el-row class="contain-box">
        <site-nav/>
        <div class="view-body">
            <el-row>
                <el-form class="inline-form" inline>
                    <el-form-item label="应用">
                        <el-input @clear="search" clearable placeholder="请输入应用" v-model="params.applicationName"/>
                    </el-form-item>
                    <el-form-item label="操作内容">
                        <el-input @clear="search" clearable placeholder="请输入姓名" v-model="params.operationContentLike"/>
                    </el-form-item>
                    <el-form-item label="操作者ID">
                        <el-input @clear="search" clearable placeholder="请输入操作者ID" v-model="params.userId"/>
                    </el-form-item>
                    <el-form-item label="操作者用户名">
                        <el-input @clear="search" clearable placeholder="请输入操作者用户名" v-model="params.username"/>
                    </el-form-item>
                    <el-form-item label="操作者姓名">
                        <el-input @clear="search" clearable placeholder="请输入操作者姓名" v-model="params.nameLike"/>
                    </el-form-item>
                    <el-form-item label="时间">
                        <el-date-picker
                                v-model="times"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                format="yyyy-MM-dd HH:mm"
                                value-format="yyyy-MM-dd HH:mm"
                                @clear="search"
                                @change="search"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="search" icon="el-icon-search" type="primary">搜索</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="exportExcel">导出Excel</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <el-col>
                    <el-table :data="list" border size="small">
                        <el-table-column align="center" label="ID" prop="operationLogId" width="150"/>
                        <el-table-column align="center" label="应用" prop="applicationName"/>
                        <el-table-column align="center" label="操作内容" prop="operationContent"/>
                        <el-table-column align="center" label="操作时间">
                            <template slot-scope="scope">{{scope.row.operationTime | datetimeFormat}}</template>
                        </el-table-column>
                        <el-table-column align="center" label="操作者信息">
                            <el-table-column align="center" label="用户ID" prop="userId"/>
                            <el-table-column align="center" label="用户名" prop="username"/>
                            <el-table-column align="center" label="姓名" prop="name"/>
                        </el-table-column>
                        <el-table-column align="center" label="操作" width="110">
                            <template slot-scope="scope">
                                <el-button @click="viewParams(scope.row)" size="mini" type="primary">查看参数</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <el-row>
                <el-col class="pagination">
                    <el-pagination :current-page="params.pageId" :page-size="params.pageSize" :total="count"
                                   @current-change="currentChange" background layout="total, prev, pager, next"/>
                </el-col>
            </el-row>
        </div>
        <el-dialog title="参数" :visible.sync="dialogVisible" width="50%">
            <span>{{infoParams}}</span>
        </el-dialog>
    </el-row>
</template>
<script lang="ts">
  import {PARAMS} from '@/api/http';
  import Api from '@/api/user/operationLogApi';
  import Entity from '@/structure/operationLog';
  import download from '@/utils/download';
  import {Component, Vue} from 'vue-property-decorator';

  @Component
  export default class Page extends Vue {
    public dialogVisible: boolean = false;
    public infoParams: string = '';
    public list: Entity[] = [];
    public count: number | null = null;
    public params: PARAMS = {
      pageId: 1,
      applicationName: '',
      operationContentLike: '',
      userId: '',
      username: '',
      nameLike: '',
      operationTimeStartWith: '',
      operationTimeEndWith: ''
    };
    public times: string[] = [];

    public created(): void {
      this.times[0] = this.$moment(Date.now() - 86400000).format('YYYY-MM-DD HH:mm');
      this.times[1] = this.$moment(Date.now()).format('YYYY-MM-DD HH:mm');
      this.getDataList();
    }

    public getDataList(): void {
      Api.findList(this.getParams()).then((res) => {
        this.list = res.list;
        this.count = res.count;
      });
    }

    public getParams() {
      const params = {...this.params};
      if (this.times && this.times.length === 2) {
        params.operationTimeStartWith = this.times[0];
        params.operationTimeEndWith = this.times[1];
      } else {
        params.operationTimeStartWith = '';
        params.operationTimeEndWith = '';
      }
      return params;
    }

    public currentChange(val: number): void {
      this.params.pageId = val;
      this.getDataList();
    }

    public search(): void {
      this.currentChange(1);
    }

    public viewParams(info: Entity): void {
      Api.findOne(info.operationLogId).then((res) => {
        this.dialogVisible = true;
        this.infoParams = res.operationParams;
      });
    }

    public exportExcel(): void {
      Api.exportExcel(this.getParams()).then((blob) => {
        download(blob, '操作记录列表 ' + this.$moment(Date.now()).format('YYYY-MM-DD-HH-mm-ss') + '.xlsx');
      });
    }
  }
</script>

